<template>
  <div class="main">
    <div class="search">
       <div class="input">
         <div style="margin-top: 15px;">
           <el-input placeholder="请输入内容"  class="input-with-select">
             <el-select v-model="select" slot="prepend" placeholder="请选择校区">
               <el-option label="增城校区" value="1"></el-option>
               <el-option label="广州校区" value="2"></el-option>
             </el-select>
             <el-button slot="append" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
           </el-input>
         </div>
       </div>
    </div>
    <div class="taskList">
      <ul>
        <li v-for="(item,index) in taskList" :key=index>
          <h3>任务名称：{{item.taskName}}</h3>
          <div class="content">
            <h4>任务简介:</h4>
            <p v-text="item.taskContent"></p>
          </div>
          <div class="money">
            <span>金额：{{item.taskMoney}}</span>
          </div>
          <div class="access">
            <el-button type="success" @click="accessTask(index)">抢任务</el-button>
          </div>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="currentPagechange"
        :total="page.total"
        :page-size="page.size"
        :current-page="page.current">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, updateTask} from '../../api/task'
export default{
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: '',
      page: {
        size:5,
        current:1
      },
      taskList: []
    }
  },
  methods: {
    getTaskList () {
      getList(this.page, this.$store.getters.user.userId).then(res => {
        this.taskList = res.data.records
        this.page = res.data
      })
    },
    accessTask (index) {
      console.log('抢任务', index)
      var task = this.taskList[index]
      task.acceptUser = this.$store.getters.user
      task.taskState = 2
      updateTask(task).then(res => {
        this.getTaskList()
        this.$message.success('抢到任务拉')
      })
    },
    // 搜索
    search () {

    },
    // 换页
    currentPagechange (currentPage) {
      this.page.current = currentPage
      this.getTaskList()
    }
  },
  created () {
    // 创建立刻获取列表
    this.getTaskList()
  }
}
</script>

<style scoped="scoped">
    .main{
      background-color: #f5f6f7;
    }
  .search{
    background-color: #FFFFFF;
    width: 100%;
    height: 100px;
    padding-top: 10px;
  }
  .input{
    width: 60%;
    margin: 0 auto;
    background-color: #f5f6f7;
  }
	.taskList{
		height: 100%;
		width: 60%;
		margin: 0 auto;
    border: 1px solid transparent;
	}
  li{
    width: 70%;
    background-color: #ffffff;
    margin: 10px auto;
    /* border: 1px solid transparent; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  }
  li h3{
    text-align: center;
    margin-top: 10px;
    color: #00c2b3;
  }
  .content{
    display: inline-block;
    margin:0px 10px;
    width: 40%;
    color: #61687c;
  }
  .content h4{
    color: #00c2b3;
  }
  .money{
    display: inline-block;
    margin-left: 70px;
    color: #fc7095;
    font-weight: bold;
  }
  .access{
    display: inline-block;
    float: right;
    margin-right: 20px;
  }
  .el-pagination{
    text-align: center;
  }
  .el-select{
    width: 120px;
  }
  .el-select .el-input {
      width: 130px;
    }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
